<style lang="less" scoped>
@import "../../../../assets/iconfont/iconfont.css";
.icon-btn {
  color: #3cbce5 !important;
}
</style>

<template>
  <a
    href="javascript:void(0)"
    @click="toggleFullScreen"
  >
    <Tooltip
      :content="isFullScreen ? $t('header.exitFullscreen') : $t('header.fullScreen')"
      placement="bottom"
    >
      <Icon
        custom="iconfont icon-FullScreen icon-btn"
        v-if="!isFullScreen"
        :size="23"
      />
      <Icon
        custom="iconfont icon-ExitFullScreen icon-btn"
        v-if="isFullScreen"
        :size="23"
      />
    </Tooltip>
  </a>
</template>

<script>
export default {
  data () {
    return {
      canFullScreen: false,
      isFullScreen: false
    }
  },

  methods: {
    toggleFullScreen () {
      if (this.canFullScreen) {
        if (this.isFullScreen) {
          // 关闭全屏
          this.exitFullScreen()
          this.isFullScreen = false
        } else {
          // 打开全屏

          this.requestFullScreen(document.getElementById('home-page-box'))
          this.isFullScreen = true
        }
        this.$emit('resizeMap')
      } else {
        this.$Message.warning({
          content: '当前浏览器暂不支持全屏模式，请切换浏览器后重新尝试！',
          duration: 3
        })
      }
    },
    requestFullScreen (element) {
      // 判断各种浏览器，找到正确的方法
      const requestMethod = element.requestFullScreen || // W3C
        element.webkitRequestFullScreen || // Chrome, safari
        element.mozRequestFullScreen || // FireFox
        element.msRequestFullscreen // IE11
      if (requestMethod) {
        requestMethod.call(element)
      }
    },
    exitFullScreen () {
      var exitMethod = document.exitFullscreen || // W3C
        document.mozCancelFullScreen || // FireFox
        document.webkitExitFullscreen || // Chrome等
        document.msExitFullscreen // IE11
      if (exitMethod) {
        exitMethod.call(document)
      }
    },
    addFullScreenListener () {
      const self = this
      document.onkeydown = function (e) {
        if (e && e.keyCode === 122) { // 捕捉F11键盘动作
          e.preventDefault() // 阻止F11默认动作
          self.toggleFullScreen()
        }
      }
      // 监听不同浏览器的全屏事件，并件执行相应的代码
      switch (self.browserKernel) {
        case 'webkit':
          document.onwebkitfullscreenchange = function () {
            if (document.webkitIsFullScreen) {
              self.isFullScreen = true
            } else {
              self.isFullScreen = false
            }
          }
          break
        case 'gecko':
          document.onmozfullscreenchange = function () {
            if (document.mozFullScreen) {
              self.isFullScreen = true
            } else {
              self.isFullScreen = false
            }
          }
          break
        case 'trident':
          document.onmsfullscreenchange = function () {
            if (document.msFullscreenElement) {
              self.isFullScreen = true
            } else {
              self.isFullScreen = false
            }
          }
          break
        case 'others':
          document.onfullscreenchange = function () {
            if (document.fullscreen) {
              self.isFullScreen = true
            } else {
              self.isFullScreen = false
            }
          }
          break
        default:
          break
      }
    },
    handleUserAction (action) {
      switch (action) {
        case 'logout':
          this.$store.commit('zjsb/setCompletionFilledModalData', {
            isReresh: false,
            show: false,
            row: {}
          })
          this.$store.commit('zjsb/setPreFilledModalData', {
            isReresh: false,
            show: false,
            row: {}
          })
          this.$store.commit('user/logout')
          this.$router.push('/login')
          break
        case 'userCenter':
          this.$router.push({ name: 'self-edit' })
          break
        default:
          break
      }
    },
    toggleShrink () {
      this.$emit('toggleShrink')
    },
    // 检查浏览器是否支持全屏
    checkIsFullScreen () {
      this.canFullScreen = document.fullscreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.msFullscreenEnabled
      if (document.webkitFullscreenEnabled) {
        this.browserKernel = 'webkit'
      } else if (document.mozFullScreenEnabled) {
        this.browserKernel = 'gecko'
      } else if (document.msFullscreenEnabled) {
        this.browserKernel = 'trident'
      } else if (document.fullscreenEnabled) {
        this.browserKernel = 'others'
      }
      if (this.canFullScreen) {
        this.addFullScreenListener()
      }
    }
  },
  mounted () {
    // 检查浏览器是否支持全屏
    this.checkIsFullScreen()
  },
  destroyed () {
    document.onkeydown = null
    switch (this.browserKernel) {
      case 'webkit':
        document.onwebkitfullscreenchange = null
        break
      case 'gecko':
        document.onmozfullscreenchange = null
        break
      case 'trident':
        document.onmsfullscreenchange = null
        break
      case 'others':
        document.onfullscreenchange = null
        break
      default:
        break
    }
  }
}
</script>
